<!-- @format -->

<template>
	<div class="allocation-container justify-between p-4">
		<!-- CRUD 组件 -->
		<ma-crud :options="options" :columns="columns" ref="crudRef">
			<template #dept_id="{ record }">
				<!-- 对标题加上 tag -->
				<div>{{ record.dept_name }}</div>
			</template>
			<template #money="{ record }">
				<!-- 对标题加上 tag -->
				<div>￥{{ record.money }}</div>
			</template>
		</ma-crud>
	</div>
</template>
<script setup>
	import { ref, reactive, onMounted } from "vue";
	import financialMoneyDate from "@/api/financial/financialMoneyDate";
	import { Message } from "@arco-design/web-vue";
	import dayjs from "dayjs";
	import tool from "@/utils/tool";
	import * as common from "@/utils/common";

	// 传参
	const params = ref({ page: 1, pageSize: 10 });

	const numberOperation = (newValue, id, numberName) => {
		financialMoneyDate
			.numberOperation({ id, numberName, numberValue: newValue })
			.then((res) => {
				res.success && Message.success(res.message);
			})
			.catch((e) => {
				console.log(e);
			});
	};

	const switchStatus = (statusValue, id, statusName) => {
		financialMoneyDate
			.changeStatus({ id, statusName, statusValue })
			.then((res) => {
				res.success && Message.success(res.message);
			})
			.catch((e) => {
				console.log(e);
			});
	};

	const options = reactive({
		id: "flyos_financial_money_date",
		rowSelection: {
			showCheckedAll: true,
		},
		pk: "id",
		operationColumn: false,

		operationWidth: 160,
		formOption: {
			viewType: "modal",
			width: 600,
		},
		api: financialMoneyDate.getList,
		recycleApi: financialMoneyDate.getRecycleList,
		add: {
			show: false,
			api: financialMoneyDate.save,
			auth: ["financial:moneyDate:save"],
		},
		edit: {
			show: false,
			api: financialMoneyDate.update,
			auth: ["financial:moneyDate:update"],
		},
		delete: {
			show: false,
			api: financialMoneyDate.deletes,
			auth: ["financial:moneyDate:delete"],
			realApi: financialMoneyDate.realDeletes,
			realAuth: ["financial:moneyDate:realDeletes"],
		},
		recovery: {
			show: false,
			api: financialMoneyDate.recoverys,
			auth: ["financial:moneyDate:recovery"],
		},
		import: {
			show: false,
			url: "financial/moneyDate/import",
			templateUrl: "financial/moneyDate/downloadTemplate",
			auth: ["financial:moneyDate:import"],
		},
		export: {
			show: true,
			url: "financial/moneyDate/export",
			auth: ["financial:moneyDate:export"],
		},
		// beforeRequest: (paramse) => {
		// 	if (currentTag.value == 5) {
		// 		paramse.type = "";
		// 		paramse.created_at = rangeValue.value;
		// 	} else if (currentTag.value == 0) {
		// 		paramse.type = "";
		// 		paramse.created_at = "";
		// 	} else {
		// 		paramse.type = currentTag.value;
		// 		paramse.created_at = "";
		// 	}
		// },
		resetSearch: (e) => {
			console.log("点击重置按钮");
			currentTag.value = 0;
		},
	});

	const columns = reactive([
		{
			title: "",
			dataIndex: "id",
			formType: "input",
			addDisplay: false,
			editDisplay: false,
			hide: true,
			commonRules: {
				required: true,
				message: "请输入",
			},
		},
		{
			title: "交易单号",
			dataIndex: "dept_id",
			align: "center",
			formType: "input-search",
			width: 200,
			fixed: "left",
			search: true,
			dict: {
				// 远程通用接口请求，新版代码生成都有一个 remote 接口
				remote: "system/dept/remote",
				// 指定组件接收的props
				props: { label: "name", value: "id" },
				// 开启分页
				openPage: false,
				// 远程请求配置项
				remoteOption: {
					// 按用户名排序
					sort: { id: "desc" }, // 如果不指定排序方式，默认为正序排序
					// 设置查询的字段
					select: ["id", "name"],
					// 设置数据过滤
					filter: {
						type: ["=", 2],
						status: ['=',1]
					},
					// 关联模型
					relations: [],
				},
			},
		},
		{
			title: "关联订单",
			dataIndex: "created_at",
			formType: "range",
			align: "center",
			showTime: false,
			search: true,
		},
		{
			title: "交易时间",
			dataIndex: "created_at",
			formType: "range",
			align: "center",
			showTime: false,
			search: true,
		},
		{
			title: "交易金额",
			dataIndex: "money",
			formType: "input",
			align: "center",
			search: false,
		},
		{
			title: "客户名称",
			dataIndex: "updated_at",
			formType: "date",
			addDisplay: false,
			editDisplay: false,
			showTime: true,
		},
		{
			title: "支付方式",
			dataIndex: "deleted_at",
			formType: "date",
			addDisplay: false,
			editDisplay: false,
			showTime: true,
		},
		{
			title: "签署公司",
			dataIndex: "deleted_at",
			formType: "date",
			addDisplay: false,
			editDisplay: false,
			showTime: true,
		},
	]);
</script>
<style scoped lang="less">
	.allocation-container {
		background: #fff;
	}
	.home-page-title {
		align-items: center !important;
		p {
			font-size: 20px;
			color: #415b73;
			margin-left: 20px;
			font-style: italic;
		}
		img {
			height: 30px;
		}

		.datetime {
			align-items: center;

			span {
				width: 64px;
				border-radius: 32px;
				padding: 4px 0;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20px;
				color: #00a0e9;
				border: 1px solid #00a0e9;
				font-size: 14px;
				font-weight: 400;
				cursor: pointer;

				&.active {
					background: #00a0e9;
					color: #fff;
				}
			}
		}
	}
</style>
<script>
	export default { name: "financial:moneyDate" };
</script>
